<template>
  <div class="tip">
    <!-- 常见科室的结构 -->
    <div class="deparment">
      <div class="header">
        <div class="left">
          <SvgIcon name="keshi" class="icon"></SvgIcon>
          <span>常见科室</span>
        </div>
        <div class="right">
          <span>全部</span>
          <el-icon><ArrowRight /></el-icon>
        </div>
      </div>
      <div class="content">
        <ul>
          <li>神经内科</li>
          <li>消化内科</li>
          <li>呼吸内科</li>
          <li>内科</li>
          <li>神经外科</li>
          <li>妇科</li>
          <li>产科</li>
          <li>儿科</li>
        </ul>
      </div>
    </div>
    <!-- 平台公告 -->
    <div class="notice">
      <div class="header">
        <div class="left">
          <SvgIcon name="pingtai" class="icon"></SvgIcon>
          <span>平台公告</span>
        </div>
        <div class="right">
          <span>全部</span>
          <el-icon><ArrowRight /></el-icon>
        </div>
      </div>
      <div class="content">
        <ul>
          <li>关于延长xx大学国际医院放假的通知</li>
          <li>xxx大学东方医院不分科室医生门诊</li>
          <li>xxx总医院号源暂停更新通知</li>
        </ul>
      </div>
    </div>
    <!-- 停诊公告 -->
    <div class="notice">
      <div class="header">
        <div class="left">
          <SvgIcon name="tingzhen" class="icon"></SvgIcon>
          <span>停诊公告</span>
        </div>
        <div class="right">
          <span>全部</span>
          <el-icon><ArrowRight /></el-icon>
        </div>
      </div>
      <div class="content">
        <ul>
          <li>关于延长xx大学国际医院放假的通知</li>
          <li>xxx大学东方医院不分科室医生门诊</li>
          <li>xxx总医院号源暂停更新通知</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.tip {
  color: #7f7f7f;

  .deparment {
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        display: flex;
        span {
          margin-left: 5px;
        }
      }
      .right {
        display: flex;
        align-items: center;
      }
    }

    .content {
      ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        li {
          width: 40%;
          margin-top: 20px;
        }
      }
    }
  }

  .notice {
    margin-top: 20px;
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        display: flex;
        span {
          margin-left: 5px;
        }
      }
      .right {
        display: flex;
        align-items: center;
      }
    }

    .content {
      ul {
        li {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin-top: 20px;
        }
      }
    }
  }
}
</style>
